<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.jungo.web.bean.Product" %>
<%@ page import="java.util.*" %>
<%@ page import="java.net.URLEncoder" %>
<%@ page import="java.io.File" %>
<%@	taglib prefix="c"			uri="http://java.sun.com/jsp/jstl/core"%>
<%@	taglib prefix="fmt"		uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@	taglib prefix="fn"		uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring"	uri="http://www.springframework.org/tags" %>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="resources/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="resources/css/flexslider.css" type="text/css" media="screen" />
<title>중고마트</title>
</head>
<body>
<%
	List<Product> products = null;

	String slideCode = (String)request.getAttribute("slideCode");
	if ( "default".equals(slideCode) ) {
		products = new ArrayList<Product>();
		Product product = new Product();
		product.setImage_path("resources/image/default/suji.jpg");
		product.setTitle("수지");
		product.setFavorite_count(100);
		products.add(product);
		product = new Product();
		product.setImage_path("resources/image/default/minjung.jpg");
		product.setTitle("민정");
		product.setFavorite_count(90);
		products.add(product);
		product = new Product();
		product.setImage_path("resources/image/default/yunhui.jpg");
		product.setTitle("연희");
		product.setFavorite_count(80);
		products.add(product);
		product = new Product();
		product.setImage_path("resources/image/default/anne.jpg");
		product.setTitle("앤 헤서웨이");
		product.setFavorite_count(70);
		products.add(product);
	} else {
		products = (List<Product>)request.getAttribute("products");
	}
%>
<section id="index" data-role="page">
    <header data-role="header" data-position="fixed">
    	<h1>중고마켓</h1>
		<a data-role="button" href="account.do" class="ui-btn-right" data-ajax="false">회원가입</a>
    </header>
    <p></p>
    
	<div class="flexslider">
		<ul class="slides">
			<c:forEach var="product" items="<%= products %>">
		       	<li>
             		<img src="${ product.image_path }" height="200">
             		${ product.title }
               	</li>
        	</c:forEach>
		</ul>
	</div>
	
	<br>
	<div class="category-content">
	    <div class="ui-block-a">
	        <div class="ui-body ui-body-d">
	            <h2>국내 중고 사이트 중 가장 많은 야구 용품 보유</h2>
	            <p>왼손잡이 전용 글러브, 포수 용품, 알루미늄 배트 등 양질의 중고 야구 용품을 판매자와 1:1로 거래</p>
	        </div>
	    </div>
	    <div class="ui-block-b">
	        <div class="ui-body ui-body-d">
	            <h2>국내 유일의 중고 악기 거래 사이트</h2>
	            <p>고가의 악기를 싼 가격에 살 수 있는 중고마켓. 저렴한 가격으로 중고 악기를 구매할 수 있는 찬스!</p>
	        </div>
	    </div>
	    <div class="ui-block-c">
	        <div class="ui-body ui-body-d">
					<h2>IT 서적에 특화된 중고책 거래</h2>
					<p>다른 서적과 비교하여 상대적으로 가격이 비싼 IT 전문 서적을 보다 저렴한 가격으로 구입</p>
	        </div>
	    </div>
	</div>
	
    <footer data-role="footer" data-position="fixed">
    	<div data-role="navbar" data-iconpos="left">
			<ul>
				<li><a href="products.do" data-icon="grid" rel="external">전체 상품</a></li>
				<li><a href="myProducts.do" data-icon="bars" rel="external">내 상품</a></li>
				<li><a href="myFavorites.do" data-icon="star" rel="external">내 관심상품</a></li>
			</ul>
		</div><!-- /navbar -->
    </footer>
</section>
</body>
<style>
.flexslider { margin: 0px 15px; }
.category-content { margin: 40px 15px; }
.slider-ul { list-style:none; padding;0; margin:0; }
.slider-li { dispaly:inline; float: left; padding;0; margin:0; }
</style>
<script>

$(document).bind('pageinit', function() {
	$('.flexslider').flexslider({
	    animation: "slide"
	});
});

</script>
</html>